<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>拖拽选址</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            width: 100%;
            padding: 0;
            overflow: hidden;
            font-size: 13px;
        }

        .map {
            height: 100%;
            width: 60%;
            float: left;
        }

        #right {
            color: #444;
            background-color: #f8f8f8;
            width: 40%;
            float: left;
            height: 100%;
        }

        #start,
        #stop,
        #right input {
            margin: 4px;
            margin-left: 15px;
        }

        .title {
            width: 100%;
            background-color: #dadada;
            padding: 5px 0;
        }

        button {
            border: solid 1px;
            margin-left: 15px;
            background-color: #1DA295;
            color: white;
            cursor: pointer;
        }

        .c {
            font-weight: 600;
            padding-left: 15px;
            padding-top: 4px;
            margin-top: 10px;
        }

        #lnglat,
        #address,
        #nearestJunction,
        #nearestRoad,
        #nearestPOI,
        .title {
            padding-left: 15px;
        }
        .js_sub_btn{width:40%;height: 35px;margin-top: 10px;}
        .js_sub_btn:hover{background: #2CB2A5;}



        #pickerBox {
            position: absolute;
            z-index: 9999;
            top: 10px;
            left: 10px;
            width: 500px;
        }

        #pickerInput {
            width: 200px;
            padding: 5px 5px;
        }

        #poiInfo {
            background: #fff;
        }

        .amap_lib_placeSearch .poibox.highlight {
            background-color: #CAE1FF;
        }

        .amap_lib_placeSearch .poi-more {
            display: none!important;
        }

    </style>
</head>

<body>
<div id="container" class="map" tabindex="0"></div>
<div id="pickerBox">
    <input id="pickerInput" placeholder="输入关键字选取地点" />
    <input type="hidden" name="lng"/>
    <input type="hidden" name="lat"/>
    <div id="poiInfo"></div>
</div>
<div id='right'>
    <div>
        <div class='title'>选择模式</div>
        <input type='radio' name='mode' value='dragMap'>拖拽地图模式</input></br>
        <input type='radio' name='mode' value='dragMarker' checked>拖拽Marker模式</input>
    </div>
    <div>
        <button id='start'>开始选点</button>
        <button id='stop'>关闭选点</button>
    </div>
    <div>
        <div class='title'>选址结果</div>
        <div class='c'>经纬度:</div>
        <div id='lnglat'></div>
        <div class='c'>地址:</div>
        <div id='address'></div>
        <div class='c'>最近的路口:</div>
        <div id='nearestJunction'></div>
        <div class='c'>最近的POI:</div>
        <div id='nearestPOI'></div>
    </div>
    <div>
        <button class="js_sub_btn">确认选择</button>
    </div>
</div>
<script src="__ROOT__/static/plugs/layui/layui.all.js"></script>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.15&key=beb4259916fe426d6dfc2c2c164cd3e6&plugin=AMap.ToolBar'></script>
<!-- UI组件库 1.0 -->
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
    AMapUI.loadUI(['misc/PositionPicker','misc/PoiPicker'], function(PositionPicker,PoiPicker) {
        var map = new AMap.Map('container', {
            zoom: 16,
            scrollWheel: true
        })
        var positionPicker = new PositionPicker({
            mode: 'dragMarker',
            map: map
        });

        var poiPicker = new PoiPicker({
            input: 'pickerInput'
        });

        //初始化poiPicker
        poiPickerReady(poiPicker);

        positionPicker.on('success', function(positionResult) {
            $('input[name=lat]').val(positionResult.position.lat);
            $('input[name=lng]').val(positionResult.position.lng);
            document.getElementById('lnglat').innerHTML = positionResult.position;
            document.getElementById('address').innerHTML = positionResult.address;
            document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;
            document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI;
        });
        positionPicker.on('fail', function(positionResult) {
            $('input[name=lat]').val('');
            $('input[name=lng]').val('');
            document.getElementById('lnglat').innerHTML = ' ';
            document.getElementById('address').innerHTML = ' ';
            document.getElementById('nearestJunction').innerHTML = ' ';
            document.getElementById('nearestPOI').innerHTML = ' ';
        });
        var onModeChange = function(e) {
            positionPicker.setMode(e.target.value)
        }
        var startButton = document.getElementById('start');
        var stopButton = document.getElementById('stop');
        var dragMapMode = document.getElementsByName('mode')[0];
        var dragMarkerMode = document.getElementsByName('mode')[1];
        AMap.event.addDomListener(startButton, 'click', function() {
            positionPicker.start()
        })
        AMap.event.addDomListener(stopButton, 'click', function() {
            positionPicker.stop();
        })
        AMap.event.addDomListener(dragMapMode, 'change', onModeChange)
        AMap.event.addDomListener(dragMarkerMode, 'change', onModeChange);
        positionPicker.start();
        map.panBy(0, 1);

        map.addControl(new AMap.ToolBar({
            liteStyle: true
        }))

        function poiPickerReady(poiPicker) {

            window.poiPicker = poiPicker;

            var infoWindow = new AMap.InfoWindow({
                offset: new AMap.Pixel(0, 0)
            });

            //选取了某个POI
            poiPicker.on('poiPicked', function(poiResult) {
                var poi = poiResult.item;
                map.setZoomAndCenter(25, [poi.location.lng, poi.location.lat]); //同时设置地图层级与中心点
            });

            poiPicker.onCityReady(function() {
                // poiPicker.suggest('美食');
            });
        }

        $('.js_sub_btn').click(function () {
            var lat=$('input[name=lat]').val();
            var lng=$('input[name=lng]').val();
            var address=$('#address').html();
            if(!lat||!lng||!address){
                layer.msg('地址信息不完整,请重新选择',{icon:2});
            }else{
                parent.$('input[name=address]').val(address);
                parent.$('input[name=lat]').val(lat);
                parent.$('input[name=lng]').val(lng);
                parent.$('.js_position_p').html(lat+','+lng);
                parent.$('input[name=center]').val(lng+','+lat);
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }
        });

    });

</script>
</body>

</html>